<!DOCTYPE html>
<html style="height: 90%; width: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<!-- layui -->
	<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
	<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>
</head>
<body style="height: 90%;width: 100%; margin: 0">
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
<div id="container" style="height: 90%;width: 100%"></div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
	$(function() {
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		console.log(dom);

		var colors = ['#5793f3', '#d14a61', '#675bba'];
		option = {
			color: colors,

			tooltip: {
				trigger: 'axis',
				axisPointer: {type: 'cross'}
			},
			grid: {
				right: '20%'
			},
			toolbox: {
				feature: {
					dataView: {show: true, readOnly: false},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			legend: {
				data: ['蒸发量', '降水量', '平均温度']
			},
			xAxis: [
				{
					type: 'category',
					axisTick: {
						alignWithLabel: true
					},
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '蒸发量',
					min: 0,
					max: 250,
					position: 'right',
					axisLine: {
						lineStyle: {
							color: colors[0]
						}
					},
					axisLabel: {
						formatter: '{value} ml'
					}
				},
				{
					type: 'value',
					name: '降水量',
					min: 0,
					max: 250,
					position: 'right',
					offset: 80,
					axisLine: {
						lineStyle: {
							color: colors[1]
						}
					},
					axisLabel: {
						formatter: '{value} ml'
					}
				},
				{
					type: 'value',
					name: '温度',
					min: 0,
					max: 25,
					position: 'left',
					axisLine: {
						lineStyle: {
							color: colors[2]
						}
					},
					axisLabel: {
						formatter: '{value} °C'
					}
				}
			],
			series: [
				{
					name: '蒸发量',
					type: 'bar',
					data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
				},
				{
					name: '降水量',
					type: 'bar',
					yAxisIndex: 1,
					data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
				},
				{
					name: '平均温度',
					type: 'line',
					yAxisIndex: 2,
					data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
				}
			]
		};

		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	});
</script>